<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <div class="box-border h-32 w-32 p-4 border-4 ">
        <!--  -->
    </div>
    <div class="box-content h-32 w-32 p-4 border-4 ">
        <!--  -->
    </div>
    <div>
        When controlling the flow of text, using the CSS property
        <span class="inline">display: inline</span>
        will cause the text inside the element to wrap normally.

        While using the property <span class="inline-block">display: inline-block</span>
        will wrap the element to prevent the text inside from extending beyond its parent.

        Lastly, using the property <span class="block">display: block</span>
        will put the element on its own line and fill its parent.
    </div>

    <div class="p-4">
        <div class="flow-root ">
            <div class="my-4 ">Well, let me tell you something, </div>
        </div>
        <div class="flow-root ">
            <div class="my-4 ">Sure, go ahead, laugh if you want</div>
        </div>
    </div>

    <div class="flex items-center gap-4">
        <img class="w-8 h-8 rounded-lg shadow-lg" src="./img/block.avif" alt="">
        <div class="flex flex-col items-center justify-center my-2">
            <strong>Andrew Alfred</strong>
            <span>Technical advisor</span>
        </div>
    </div>

    <p>
        Today I spent most of the day researching ways to
        <span class="inline-flex items-baseline">
            <img src="./img/block.avif" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
            <span>Kramer</span>
        </span>
        keeps telling me there is no way to make it work, that
    </p>
    <div class="grid gap-4 grid-cols-3 grid-rows-3">
        <!--  -->
    </div>
    <span class="inline-grid grid-cols-3 gap-4">
        <span>01</span>
        <span>02</span>
        <span>03</span>
        <span>04</span>
        <span>05</span>
        <span>06</span>
    </span>
    <span class="inline-grid grid-cols-3 gap-4">
        <span>01</span>
        <span>02</span>
        <span>03</span>
        <span>04</span>
        <span>05</span>
        <span>06</span>
    </span>


    <div class="flex  ">
        <div class="flex-1  ">01</div>
        <div class="contents">
            <div class="flex-1  ">02</div>
            <div class="flex-1  ">03</div>
        </div>
        <div class="flex-1  ">04</div>
    </div>
    <div class="table w-full ">
        <div class="table-header-group ">
            <div class="table-row">
                <div class="table-cell text-left  ">Song</div>
                <div class="table-cell text-left  ">Artist</div>
                <div class="table-cell text-left  ">Year</div>
            </div>
        </div>
        <div class="table-row-group">
            <div class="table-row">
                <div class="table-cell ">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
                <div class="table-cell ">Malcolm Lockyer</div>
                <div class="table-cell ">1961</div>
            </div>
            <div class="table-row">
                <div class="table-cell ">Witchy Woman</div>
                <div class="table-cell ">The Eagles</div>
                <div class="table-cell ">1972</div>
            </div>
            <div class="table-row">
                <div class="table-cell ">Shining Star</div>
                <div class="table-cell ">Earth, Wind, and Fire</div>
                <div class="table-cell ">1975</div>
            </div>
        </div>
    </div>
    <div class="flex ">
        <div class="hidden ">01</div>
        <div>02</div>
        <div>03</div>
    </div>
</body>

</html>